<template>
	<div class="full-screen login-bg">
		<div class="login-container">
			<div class="login-form vertail-middle">
				<div class="title-part">
					<div class="img">
						<img src="../../assets/images/login-logo.png" />
					</div>
					<div class="word">智慧校园综合管理平台</div>
				</div>
				<section class="content-part" style="margin-top: 100px;">
					<header class="login-title">欢迎登录</header>
					<el-form ref="loginForm" :rules="rules" :label-position="'right'" :model="loginForm" style="padding-top:20px;width:80%;margin:auto;">
						<el-form-item prop="loginname">
							<el-input placeholder="账号" id="loginname" v-model="loginForm.loginname" icon="eleg-icon_profile"></el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input placeholder="密码" id="loginpassword" type="password" v-model="loginForm.password" icon="eleg-icon_lock"></el-input>
						</el-form-item>
						<el-form-item style="padding-bottom:20px;">
							<el-button id="submit" type="primary" size="large" @click="onSubmit('loginForm')" style="width:100%;"><i class="el-icon el-icon-loading el-icon--left" v-if="loading"></i>{{$t('message.loginSubmit')}}</el-button>
						</el-form-item>
					</el-form>
					<!--<div class="text-center" style="padding-bottom:10px;">
						<el-button id="submit" type="primary" size="large" @click="onSubmit('loginForm')" style="width:80%;"><i class="el-icon el-icon-loading el-icon--left" v-if="loading"></i>{{$t('message.loginSubmit')}}</el-button>
					</div>-->
				</section>

			</div>
			<footer class="foot-copy" style="">{{$t('message.copyRight')}}</footer>
		</div>
	</div>
</template>
<script>
import $ from "jquery";
import { GloabFun, HttpServer } from "../../assets/js/common.js";
// import NodeRSA from "node-rsa"
const JSEncrypt = require("jsencrypt"); // 引入模块
const encrypt = new JSEncrypt.JSEncrypt(); // 实例化加密对象
export default {
  data() {
    var validateLoginName = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t("message.usernameRule")));
      } else {
        callback();
      }
    };
    var validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t("message.passwordRule")));
      } else {
        callback();
      }
    };
    document.onkeydown = function(event) {
      var e = event || window.event;
      if (e && e.keyCode == 13) {
        //回车键的键值为13
        $("#submit").click(); //调用登录按钮的登录事件
      }
    };
    return {
      loading: false,
      publicKey: "",
      loginForm: {
        loginname: "",
        password: ""
      },
      rules: {
        loginname: [
          {
            validator: validateLoginName,
            trigger: "blur"
          }
        ],
        password: [
          {
            validator: validatePassword,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          encrypt.setPublicKey(this.publicKey);
          var param = {
            uid: this.loginForm.loginname,
            password: encrypt.encrypt(this.loginForm.password),
            phone: "",
            securitycode: "",
            m: 1,
            from: 0
          };
          HttpServer.httpPost2.call(
            this,
            "/Api/User/LoginByUId",
            param,
            function(response) {},
            function(response) {
              this.loading = false;
              if (response.data.code === 0) {
                GloabFun.setUid(response.data.uid);
                GloabFun.setToken(response.data.token);
                GloabFun.setNickName(response.data.nickname);
                GloabFun.setKeyId(response.data.keyid);
                this.$router.push({
                  path: "/"
                });
              } else {
                this.$notify.error({
                  title: "错误",
                  message: response.data.msg,
                  duration: 2500
                });
              }
            }
          );
        } else {
          return false;
        }
      });
    },
    //公钥格式
    trim(str, is_global) {
      var result;
      result = str.replace(/(^\s+)|(\s+$)/g, "");
      if (is_global.toLowerCase() == "g") {
        result = result.replace(/\s/g, "");
      }
      return result;
    },
    getPublicKey() {
      //获取公钥
      HttpServer.httpGet.call(
        this,
        "/Api/User/LoginKey/Js",
        function(response) {},
        function(response) {
          // console.log('publick key',response.data.key);
          this.publicKey = this.trim(response.data.key, "g");
        }
      );
    }
  },
  created() {
    this.getPublicKey();
    this.$nextTick(function() {
      var passInput = document.querySelector("#loginpassword"),
        lognameInput = document.querySelector("#loginname");
      passInput.querySelector("input").onfocus = function() {
        passInput.className += " active-icon";
      };
      passInput.querySelector("input").onblur = function() {
        passInput.className = passInput.className.replace(
          /\s*active-icon/g,
          ""
        );
      };
      lognameInput.querySelector("input").onfocus = function() {
        lognameInput.className += " active-icon";
      };
      lognameInput.querySelector("input").onblur = function() {
        lognameInput.className = passInput.className.replace(
          /\s*active-icon/g,
          ""
        );
      };
    });
  },
  mounted(){
  	
  }
};
</script>
<style lang="less">
.content-part {
  .el-form-item__content {
    height: 36px;
  }
  .el-input__inner {
    border-radius: 5px;
    //border:none;
    font-size: 16px;
  }
  .el-input__icon {
    font-size: 20px;
  }
  #loginname.active-icon i {
    color: #20a0ff;
  }
  #loginpassword.active-icon i {
	color: #20a0ff;
  }
}
</style>
<style lang="less" scoped>
.login-bg {
  background: url("../../assets/images/login-bg3.png");
  background-size: 100% 100%;
}

.login-title {
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  padding: 10px 0;
}

.vertail-middle {
  top: 40%;
}

.login-form {
  width: 90%;
  max-width: 320px;
  margin: auto;
  padding: 20px;
  left: 0;
  right: 0;
  position: absolute;
  .title-part {
    text-align: center;
    margin-bottom: 20px;
    img {
      width: 200px;
    }
    div {
      padding-top: 5px;
      color: #fff;
      font-weight: bold;
      font-size: 30px;
      line-height: 1;
    }
  }
  .content-part {
    background-color: #ffffff;
    box-shadow: 1px 2px 3px #555;
    border-radius: 5px;
  }
}

.active-bg {
  width: 50%;
  float: left;
  height: 100%;
  margin: 0 1% 0 4%;
  position: relative;
  > div {
    margin: auto;
    max-width: 680px;
    margin-left: 2.5%;
    left: 0;
    right: 0;
    > img {
      width: 100%;
    }
  }
}

.login-container {
  width: 40%;
  /* min-width:360px; */
  /* float:left; */
  /* height:100%; */
  /* position:relative; */
  padding: 0 4% 0 1%;
}

.foot-copy {
  box-sizing: border-box;
  color: #000;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  padding: 20px;
  left: 0;
}
</style>